<template>
  <div class="config-container">
    <!-- 标题 -->
    <div class="header">
      <span class="title">闭环基本信息</span>
    </div>

    <!-- 分割线 -->
    <hr class="section-divider" />

    <!-- 表单内容 -->
    <div class="form-container">
      <!-- 闭环名称 -->
      <div class="form-item">
        <label class="label">闭环名称：</label>
        <input
          v-model="formData.closeLoopName"
          class="input"
          placeholder="请输入闭环名称"
        />
      </div>

      <!-- 闭环描述 -->
      <div class="form-item">
        <label class="label">闭环描述：</label>
        <textarea
          v-model="formData.closeLoopDetail"
          class="textarea"
          placeholder="请输入闭环描述"
        ></textarea>
      </div>

      <!-- 闭环环住 -->
      <div class="form-item">
        <label class="label">闭环环住：</label>
        <select v-model="formData.selectedOption" class="select">
          <option value="">请选择</option>
          <option
            v-for="option in userOptions"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onActivated, ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { 
  closeLoopDetailJb as useCloseLoopDetailJbStore, // 导入基本信息 Store
  useUserStore // 用户选项 Store
} from '@/stores/closeLoopList';

const route = useRoute();

// 获取 Store 实例
const closeLoopDetailJbStore = useCloseLoopDetailJbStore();
const userStore = useUserStore();

// 表单数据
const formData = ref({
  closeLoopName: '',
  closeLoopDetail: '',
  selectedOption: ''
});

// 从 Store 中获取用户选项（响应式）
const userOptions = computed(() => userStore.userOptions);
const closeLoopId = route.query.closeLoopId;

// 数据加载函数
const fetchData = async () => {
  if (closeLoopId) {
    try {
      // 1. 获取用户选项
      await userStore.fetchUserOptions();

      // 2. 获取闭环基本信息
      const detail = await closeLoopDetailJbStore.getCloseLoopDetailJb(closeLoopId);
      formData.value.closeLoopName = detail.CLOSE_LOOP_NAME || '';
      formData.value.closeLoopDetail = detail.CLOSE_LOOP_DETAIL || '';

      // 3. 设置默认选中的环主
      const defaultUserId = detail.USER_ID;
      if (defaultUserId) {
        const userIdStr = String(defaultUserId);
        const foundOption = userOptions.value.find(
          option => option.value === userIdStr
        );
        if (foundOption) {
          formData.value.selectedOption = userIdStr;
        }
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    }
  }
};

// 组件挂载时加载数据
onMounted(() => {
  fetchData();
});

// 处理 keep-alive 缓存时的激活逻辑
onActivated(() => {
  fetchData();
});

// 监听用户选项变化，确保数据加载后设置默认值
watch(
  () => userOptions.value,
  (newOptions) => {
    if (newOptions.length > 0 && closeLoopId) {
      const defaultUserId = closeLoopDetailJbStore.closeLoopDetail.USER_ID;
      if (defaultUserId) {
        const userIdStr = String(defaultUserId);
        const foundOption = newOptions.find(option => option.value === userIdStr);
        if (foundOption && !formData.value.selectedOption) {
          formData.value.selectedOption = userIdStr;
        }
      }
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.config-container {
  padding: 20px;
  border: 1px solid #eaecef;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  /* 移除可能的居中样式 */
  margin-left: 0;
}

.header {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaecef;
  margin-bottom: 15px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.section-divider {
  margin: 10px 0;
  border: 1px solid #eaecef;
}

.form-container {
  max-width: 100%; /* 确保表单容器占满父容器 */
  padding-left: 0;
  margin-left: 0;
}

.form-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  /* 左对齐表单元素 */
  margin-left: 0;
}

.label {
  width: 120px;
  font-weight: bold;
  margin-right: 10px;
}

.input,
.textarea,
.select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #eaecef;
  border-radius: 4px;
  font-size: 14px;
}

.textarea {
  resize: vertical;
  height: 80px;
}

.select {
  padding: 7px 12px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .label {
    width: 100px;
  }
}
</style>